<template>
	<div>
		<el-form ref="queryFrom" size="small" :inline="true" :model="queryForm" class="demo-form-inline">
			<el-form-item prop="title" label="系统模块">
				<el-input v-model="queryForm.title" placeholder="请输入系统模块" style="width: 140px"></el-input>
			</el-form-item>
			<el-form-item prop="operName" label="操作人员">
				<el-input v-model="queryForm.operName" placeholder="请输入操作人员" style="width: 140px"></el-input>
			</el-form-item>
			<el-form-item prop="businessType" label="类型">
				<el-select v-model="queryForm.businessType" placeholder="请选择操作类型" style="width: 150px">
					<el-option v-for="item in businessTypeList" :key="item.value" :label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="status" label="状态" :label-width="'60px'">
				<el-select v-model="queryForm.status" placeholder="请选择操作状态" style="width: 150px">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<!-- 开始时间 -->
			<el-form-item label="开始时间" :label-width="'70px'" prop="startTime">
				<el-date-picker v-model="queryForm.startTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
					placeholder="选择日期时间" style="width: 160px">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="结束时间" :label-width="'70px'" prop="endTime">
				<el-date-picker v-model="queryForm.endTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
					placeholder="选择日期时间" style="width: 160px">
				</el-date-picker>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="onQuerySubmit()" size="mini" icon="el-icon-search">搜索</el-button>
				<el-button type="primary" plain icon="el-icon-refresh" size="mini"  @click="resetForm()">重置</el-button>
				<el-button @click="deleteData(sels)" type="danger" size="mini"  plain icon="el-icon-delete">删除</el-button>
			</el-form-item>
		</el-form>
		<!-- 展示数据 -->
		<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55"> </el-table-column>
			<el-table-column prop="operId" label="日志编号" width="180">
			</el-table-column>
			<el-table-column prop="title" label="系统模块" width="120">
			</el-table-column>
			<!-- crud -->
			<el-table-column prop="businessType" label="操作类型" width="120">
				<template slot-scope="scope">
					<span v-if="scope.row.businessType == 0">
						<el-tag type="info">查询</el-tag>
					</span>
					<span v-if="scope.row.businessType == 1">
						<el-tag type="success">新增</el-tag>
					</span>
					<span v-if="scope.row.businessType == 2">
						<el-tag type="primary" plain>修改</el-tag>
					</span>
					<span v-if="scope.row.businessType == 3">
						<el-tag type="danger">删除</el-tag>
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="requestMethod" label="请求方式" width="120"></el-table-column>
			<el-table-column prop="operName" label="操作人员" width="180"></el-table-column>
			<el-table-column prop="operIp" label="操作地址" width="180"></el-table-column>
			<el-table-column prop="operLocation" label="操作地点" width="180">
			</el-table-column>
			<el-table-column prop="status" label="操作状态" width="180">
				<template slot-scope="scope">
					<span v-if="scope.row.status == 1">
						<el-tag type="danger" plain>失败</el-tag>
					</span>
					<span v-else>
						<el-tag type="primary" plain>成功</el-tag>
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="operTime" label="操作日期" width="180"></el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button @click="handleClick(scope.row)" type="text" size="small"
						icon="el-icon-location-information">详细</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryForm.pageNum"
			:page-sizes="[10, 20, 30]" :page-size="queryForm.pageSize" layout="->, total, sizes, prev, pager, next, jumper"
			:total="totalNum">
		</el-pagination>
		<!-- 弹框 -->
		<el-dialog title="操作详情" :visible.sync="dialogFormVisible">
			<el-form :model="form">
				<div>
					<span><a>操作模块:</a> {{ form.title }}</span>
					<span style="margin-left: 130px"><a>请求地址: </a>{{ form.operUrl }}</span>
				</div>
				<div>
					<span><a>登录信息:</a> {{ form.operLocation }}</span>
					<span style="margin-left: 130px"><a>请求方式: </a>{{ form.requestMethod }}</span>
				</div>
				<div>
					<span><a>操作方法:</a> {{ form.method }}</span>
				</div>
				<div>
					<span><a>请求参数:</a> {{ form.operParam }}</span>
				</div>
				<div>
					<span><a>返回参数:</a> {{ form.jsonResult }}</span>
				</div>
				<div>
					<span><a>操作状态:</a> {{ form.status == 0 ? "正常" : "异常" }}</span>
					<span style="margin-left: 130px"><a>操作时间: </a>{{ form.operTime }}</span>
				</div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">关闭</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				totalNum: 0,
				queryForm: {
					title: "",
					operName: "",
					businessType: "",
					status: "",
					startTime: "",
					endTime: "",
					pageNum:1,
					pageSize:10
				},
				tableData: [],
				multipleSelection: [],
				sels: [], //选中显示的值
				businessTypeList: [{
						value: 0,
						label: "查询",
					},
					{
						value: 1,
						label: "新增",
					},
					{
						value: 2,
						label: "修改",
					},
					{
						value: 3,
						label: "删除",
					},
				],
				options: [{
						value: 0,
						label: "成功",
					},
					{
						value: 1,
						label: "失败",
					},
				],
				dialogFormVisible: false,
				form: {},
				formLabelWidth: "120px",
			};
		},
		methods: {
			handleClick(row) {
				console.log(row);
				this.dialogFormVisible = true;
				this.form = row;
			},
			//全部选中或全部不选
			handleSelectionChange(val) {
				this.multipleSelection = val;
				this.sels = this.multipleSelection;
			},
			deleteData(rows) {
				var ids = [];
				rows.forEach((element) => {
					ids.push(element.operId);
				});
				this.$confirm("确定要删除选中的登录日志吗?", "提示")
					.then(() => {
						this.$axios
							.delete("/operlog?ids=" + ids)
							.then(response => {
								if (response.code == 20000) {
									this.$message.success(response.msg);
									this.onQuerySubmit();
								}
							});
					})
			},
			resetForm() {
				this.$refs.queryFrom.resetFields();
				this.onQuerySubmit();
			},
			handleSizeChange(val) {
				this.queryForm.pageSize = val;
				this.onQuerySubmit();
			},
			handleCurrentChange(val) {
				this.queryForm.pageNum = val;
				this.onQuerySubmit();
			},
			//提交进行条件查询
			onQuerySubmit() {
				this.$axios.get("/operlog",{params:this.queryForm})
					.then(response => {
						this.tableData = response.list;
						this.queryForm.pageNum = response.pageNum;
						this.queryForm.pageSize = response.pageSize;
						this.totalNum = response.total;
					});
			},
		},
		mounted() {
			this.onQuerySubmit();
		},
	};
</script>
<style scoped>
	a {
		color: #409eff;
		font-size: 16px;
	}
</style>
